import * as React from 'react';
import { useNativeEffect }  from 'remax';
import { View, Canvas } from 'remax/ali';
import F2 from '@antv/f2';
import { my as F2Context } from '@antv/f2-context';

const chart = null;

function drawChart(config) {
  const data = [
    { country: 'USA', value: null, year: 1940 },
    { country: 'USA', value: null, year: 1941 },
    { country: 'USA', value: null, year: 1942 },
    { country: 'USA', value: null, year: 1943 },
    { country: 'USA', value: null, year: 1944 },
    { country: 'USA', value: 6, year: 1945 },
    { country: 'USA', value: 11, year: 1946 },
    { country: 'USA', value: 32, year: 1947 },
    { country: 'USA', value: 110, year: 1948 },
    { country: 'USA', value: 235, year: 1949 },
    { country: 'USA', value: 369, year: 1950 },
    { country: 'USA', value: 640, year: 1951 },
    { country: 'USA', value: 1005, year: 1952 },
    { country: 'USA', value: 1436, year: 1953 },
    { country: 'USA', value: 2063, year: 1954 },
    { country: 'USA', value: 3057, year: 1955 },
    { country: 'USA', value: 4618, year: 1956 },
    { country: 'USA', value: 6444, year: 1957 },
    { country: 'USA', value: 9822, year: 1958 },
    { country: 'USA', value: 15468, year: 1959 },
    { country: 'USA', value: 20434, year: 1960 },
    { country: 'USA', value: 24126, year: 1961 },
    { country: 'USA', value: 27387, year: 1962 },
    { country: 'USA', value: 29459, year: 1963 },
    { country: 'USA', value: 31056, year: 1964 },
    { country: 'USA', value: 31982, year: 1965 },
    { country: 'USA', value: 32040, year: 1966 },
    { country: 'USA', value: 31233, year: 1967 },
    { country: 'USA', value: 29224, year: 1968 },
    { country: 'USA', value: 27342, year: 1969 },
    { country: 'USA', value: 26662, year: 1970 },
    { country: 'USA', value: 26956, year: 1971 },
    { country: 'USA', value: 27912, year: 1972 },
    { country: 'USA', value: 28999, year: 1973 },
    { country: 'USA', value: 28965, year: 1974 },
    { country: 'USA', value: 27826, year: 1975 },
    { country: 'USA', value: 25579, year: 1976 },
    { country: 'USA', value: 25722, year: 1977 },
    { country: 'USA', value: 24826, year: 1978 },
    { country: 'USA', value: 24605, year: 1979 },
    { country: 'USA', value: 24304, year: 1980 },
    { country: 'USA', value: 23464, year: 1981 },
    { country: 'USA', value: 23708, year: 1982 },
    { country: 'USA', value: 24099, year: 1983 },
    { country: 'USA', value: 24357, year: 1984 },
    { country: 'USA', value: 24237, year: 1985 },
    { country: 'USA', value: 24401, year: 1986 },
    { country: 'USA', value: 24344, year: 1987 },
    { country: 'USA', value: 23586, year: 1988 },
    { country: 'USA', value: 22380, year: 1989 },
    { country: 'USA', value: 21004, year: 1990 },
    { country: 'USA', value: 17287, year: 1991 },
    { country: 'USA', value: 14747, year: 1992 },
    { country: 'USA', value: 13076, year: 1993 },
    { country: 'USA', value: 12555, year: 1994 },
    { country: 'USA', value: 12144, year: 1995 },
    { country: 'USA', value: 11009, year: 1996 },
    { country: 'USA', value: 10950, year: 1997 },
    { country: 'USA', value: 10871, year: 1998 },
    { country: 'USA', value: 10824, year: 1999 },
    { country: 'USA', value: 10577, year: 2000 },
    { country: 'USA', value: 10527, year: 2001 },
    { country: 'USA', value: 10475, year: 2002 },
    { country: 'USA', value: 10421, year: 2003 },
    { country: 'USA', value: 10358, year: 2004 },
    { country: 'USA', value: 10295, year: 2005 },
    { country: 'USA', value: 10104, year: 2006 },
    { country: 'USA', value: 9914, year: 2007 },
    { country: 'USA', value: 9620, year: 2008 },
    { country: 'USA', value: 9326, year: 2009 },
    { country: 'USA', value: 5113, year: 2010 },
    { country: 'USA', value: 5113, year: 2011 },
    { country: 'USA', value: 4954, year: 2012 },
    { country: 'USA', value: 4804, year: 2013 },
    { country: 'USA', value: 4761, year: 2014 },
    { country: 'USA', value: 4717, year: 2015 },
    { country: 'USA', value: 4368, year: 2016 },
    { country: 'USA', value: 4018, year: 2017 },
    { country: 'USSR/Russia', value: null, year: 1940 },
    { country: 'USSR/Russia', value: null, year: 1941 },
    { country: 'USSR/Russia', value: null, year: 1942 },
    { country: 'USSR/Russia', value: null, year: 1943 },
    { country: 'USSR/Russia', value: null, year: 1944 },
    { country: 'USSR/Russia', value: null, year: 1945 },
    { country: 'USSR/Russia', value: null, year: 1946 },
    { country: 'USSR/Russia', value: null, year: 1947 },
    { country: 'USSR/Russia', value: null, year: 1948 },
    { country: 'USSR/Russia', value: null, year: 1949 },
    { country: 'USSR/Russia', value: 5, year: 1950 },
    { country: 'USSR/Russia', value: 25, year: 1951 },
    { country: 'USSR/Russia', value: 50, year: 1952 },
    { country: 'USSR/Russia', value: 120, year: 1953 },
    { country: 'USSR/Russia', value: 150, year: 1954 },
    { country: 'USSR/Russia', value: 200, year: 1955 },
    { country: 'USSR/Russia', value: 426, year: 1956 },
    { country: 'USSR/Russia', value: 660, year: 1957 },
    { country: 'USSR/Russia', value: 869, year: 1958 },
    { country: 'USSR/Russia', value: 1060, year: 1959 },
    { country: 'USSR/Russia', value: 1605, year: 1960 },
    { country: 'USSR/Russia', value: 2471, year: 1961 },
    { country: 'USSR/Russia', value: 3322, year: 1962 },
    { country: 'USSR/Russia', value: 4238, year: 1963 },
    { country: 'USSR/Russia', value: 5221, year: 1964 },
    { country: 'USSR/Russia', value: 6129, year: 1965 },
    { country: 'USSR/Russia', value: 7089, year: 1966 },
    { country: 'USSR/Russia', value: 8339, year: 1967 },
    { country: 'USSR/Russia', value: 9399, year: 1968 },
    { country: 'USSR/Russia', value: 10538, year: 1969 },
    { country: 'USSR/Russia', value: 11643, year: 1970 },
    { country: 'USSR/Russia', value: 13092, year: 1971 },
    { country: 'USSR/Russia', value: 14478, year: 1972 },
    { country: 'USSR/Russia', value: 15915, year: 1973 },
    { country: 'USSR/Russia', value: 17385, year: 1974 },
    { country: 'USSR/Russia', value: 19055, year: 1975 },
    { country: 'USSR/Russia', value: 21205, year: 1976 },
    { country: 'USSR/Russia', value: 23044, year: 1977 },
    { country: 'USSR/Russia', value: 25393, year: 1978 },
    { country: 'USSR/Russia', value: 27935, year: 1979 },
    { country: 'USSR/Russia', value: 30062, year: 1980 },
    { country: 'USSR/Russia', value: 32049, year: 1981 },
    { country: 'USSR/Russia', value: 33952, year: 1982 },
    { country: 'USSR/Russia', value: 35804, year: 1983 },
    { country: 'USSR/Russia', value: 37431, year: 1984 },
    { country: 'USSR/Russia', value: 39197, year: 1985 },
    { country: 'USSR/Russia', value: 45000, year: 1986 },
    { country: 'USSR/Russia', value: 43000, year: 1987 },
    { country: 'USSR/Russia', value: 41000, year: 1988 },
    { country: 'USSR/Russia', value: 39000, year: 1989 },
    { country: 'USSR/Russia', value: 37000, year: 1990 },
    { country: 'USSR/Russia', value: 35000, year: 1991 },
    { country: 'USSR/Russia', value: 33000, year: 1992 },
    { country: 'USSR/Russia', value: 31000, year: 1993 },
    { country: 'USSR/Russia', value: 29000, year: 1994 },
    { country: 'USSR/Russia', value: 27000, year: 1995 },
    { country: 'USSR/Russia', value: 25000, year: 1996 },
    { country: 'USSR/Russia', value: 24000, year: 1997 },
    { country: 'USSR/Russia', value: 23000, year: 1998 },
    { country: 'USSR/Russia', value: 22000, year: 1999 },
    { country: 'USSR/Russia', value: 21000, year: 2000 },
    { country: 'USSR/Russia', value: 20000, year: 2001 },
    { country: 'USSR/Russia', value: 19000, year: 2002 },
    { country: 'USSR/Russia', value: 18000, year: 2003 },
    { country: 'USSR/Russia', value: 18000, year: 2004 },
    { country: 'USSR/Russia', value: 17000, year: 2005 },
    { country: 'USSR/Russia', value: 16000, year: 2006 },
    { country: 'USSR/Russia', value: 15537, year: 2007 },
    { country: 'USSR/Russia', value: 14162, year: 2008 },
    { country: 'USSR/Russia', value: 12787, year: 2009 },
    { country: 'USSR/Russia', value: 12600, year: 2010 },
    { country: 'USSR/Russia', value: 11400, year: 2011 },
    { country: 'USSR/Russia', value: 5500, year: 2012 },
    { country: 'USSR/Russia', value: 4512, year: 2013 },
    { country: 'USSR/Russia', value: 4502, year: 2014 },
    { country: 'USSR/Russia', value: 4502, year: 2015 },
    { country: 'USSR/Russia', value: 4500, year: 2016 },
    { country: 'USSR/Russia', value: 4500, year: 2017 },
  ];
  const chart = new F2.Chart(config);
  chart.source(data);
  chart.scale('year', {
    tickCount: 5,
  });
  chart.axis('year', {
    label(text, index, total) {
      const textCfg = {};
      if (index === 0) {
        textCfg.textAlign = 'left';
      }
      if (index === total - 1) {
        textCfg.textAlign = 'right';
      }
      return textCfg;
    },
  });
  chart.axis('value', {
    label(text) {
      return {
        text: text / 1000 + 'k',
      };
    },
  });
  // tooltip 与图例结合
  chart.tooltip({
    showCrosshairs: true,
    custom: true, // 自定义 tooltip 内容框
    onChange(obj) {
      const legend = chart.get('legendController').legends.top[0];
      const tooltipItems = obj.items;
      const legendItems = legend.items;
      const map = {};
      legendItems.map((item) => {
        map[item.name] = Object.assign({}, item);
      });
      tooltipItems.map((item) => {
        const { name, value } = item;
        if (map[name]) {
          map[name].value = value;
        }
      });
      legend.setItems(Object.values(map));
    },
    onHide() {
      const legend = chart.get('legendController').legends.top[0];
      legend.setItems(chart.getLegendItems().country);
    },
  });
  chart.area().position('year*value').color('country').shape('smooth');
  chart.line().position('year*value').color('country').shape('smooth');
  chart.render();
  return chart;
}

export default () => {
  const canvasRef = React.useRef();
  const [dimension, setDimension] = React.useState({
    width: 0,
    height: 0,
    pixelRatio: 0,
  });

  React.useEffect(() => {
    my.createSelectorQuery()
      .select('#area')
      .boundingClientRect()
      .exec((res) => {
        // 获取分辨率
        const pixelRatio = my.getSystemInfoSync().pixelRatio;
        // 获取画布实际宽高
        const { width, height } = res[0];
        setDimension({
          width: width,
          height: height,
          pixelRatio,
        });
      });
  }, []);

  useNativeEffect(() => {
    if (dimension.width > 0) {
      const myCtx = my.createCanvasContext('area');
      const context = F2Context(myCtx);
      const chart = drawChart({ context, ...dimension });
      canvasRef.current = chart.get('el');
    }
  }, [dimension.width, dimension.height, dimension.pixelRatio]);

  const touchStart = (e) => {
    if (canvasRef.current) {
      canvasRef.current.dispatchEvent('touchstart', [e]);
    }
  };

  const touchMove = (e) => {
    if (canvasRef.current) {
      canvasRef.current.dispatchEvent('touchmove', [e]);
    }
  };

  const touchEnd = (e) => {
    if (canvasRef.current) {
      canvasRef.current.dispatchEvent('touchend', [e]);
    }
  };

  return (
    <View className="container">
      <Canvas
        id="area"
        disableScroll
        onTouchStart={touchStart}
        onTouchMove={touchMove}
        onTouchEnd={touchEnd}
        width={dimension.width * dimension.pixelRatio}
        height={dimension.height * dimension.pixelRatio}
      />
    </View>
  );
};
